<section class="content-section-column" style="padding: 0 24px 24px 24px; background-color: #f0f2f4">
  <h3>Card</h3>
  <lv-tabs lvType="card" class="demo-tabs-card" [(lvActiveIndex)]="index" (lvActiveIndexChange)="change($event)">
    <lv-tab [lvTitle]="textTitleTpl" lvId="card01"><ng-container [ngTemplateOutlet]="contentTpl"></ng-container></lv-tab>
    <lv-tab [lvTitle]="iconTitleTpl" lvId="card02"></lv-tab>
    <lv-tab [lvTitle]="ellipsisTitleTpl" lvId="card03"></lv-tab>
  </lv-tabs>

  <h3>Default</h3>
  <lv-tabs class="demo-tabs-default">
    <lv-tab [lvTitle]="snapshotTitle"><ng-container [ngTemplateOutlet]="contentTpl"></ng-container></lv-tab>
    <lv-tab [lvTitle]="storageTitle"></lv-tab>
  </lv-tabs>
</section>

<ng-template #textTitleTpl>
  <div><span class="demo-tabs-title-text">存储设备</span>4</div>
</ng-template>
<ng-template #iconTitleTpl>
  <div style="display: flex; align-items: center">
    <span class="demo-tabs-title-text">服务器</span>
    <i lv-icon="icon-notice"></i>
  </div>
</ng-template>
<ng-template #ellipsisTitleTpl>
  <div style="width: 100px" lvOverflow>Tab long long long long long long long long long long name</div>
</ng-template>

<ng-template #snapshotTitle>
  <div class="demo-tabs-title">
    <i lv-icon="icon-data-center" class="demo-tabs-title-icon"></i>
    <span><span class="demo-tabs-title-text">虚拟机快照</span>124</span>
  </div>
</ng-template>

<ng-template #storageTitle>
  <div class="demo-tabs-title">
    <i lv-icon="icon-storage" class="demo-tabs-title-icon"></i>
    <span><span class="demo-tabs-title-text">主机</span>12</span>
  </div>
</ng-template>

<ng-template #contentTpl>
  <div class="demo-tabs-card-item"></div>
</ng-template>
